<template>
  <div class="live-contents">
    <div class="header">
      <div class="h-w">
        <i class="iconfont icon-fanhui" @click="back"></i>
        <div class="h-main">
          <div class="item" :class="item_active=='1'?'itemActive':''" @click="itemActive('1')">热门</div>
          <div class="item2"></div>
          <div class="item" :class="item_active=='2'?'itemActive':''" @click="itemActive('2')">关注</div>
        </div>
      </div>
    </div>
    <div class="banner" v-if="item_active==1">
      <img src="../img/live_banner_1.png" alt>
    </div>
    <ul class="live-lists">
      <li v-for="(item,index) in arr" :key="index" @click="toWatch(index)">
        <div>
          <img :src="item.cover" v-if="item.cover">
          <img src="@/assets/img/live.jpg" v-else>
          <span class="live-name">{{item.name}}</span>
          <span class="watch-num" @click.stop="isLoveClick(item)">
            <div class="item">
              <img v-if="item.isLove" src="../img/xin2.png" alt>
              <img v-else src="../img/xin1.png" alt>
            </div>
            <div class="item">{{item.num}}</div>
            <div class="item item3">
              <img src="../img/people.png" alt>
            </div>
            <div class="item">{{item.people}}</div>
          </span>
        </div>
      </li>
    </ul>
    <!-- <ul class="live-lists">
      <li v-for="(item,index) in lists[tab]" :key="index" @click="toWatch(index)">
        <div>
          <img :src="item.cover" v-if="item.cover">
          <img src="@/assets/img/live.jpg" v-else>
          <span class="live-name">{{item.name}}</span>
          <span class="watch-num">{{item.num}}</span>
        </div>
      </li>
    </ul>-->
  </div>
</template>

<script>
import { Toast, MessageBox } from "mint-ui";
import html5plus from "@/utils/html5plus.js";
import { getLiveLists } from "@/api.js";
import { getGuid } from "@/utils/index";
import topBar from "@/components/topBar";
export default {
  data() {
    return {
      arr1: [
        {
          cover: require("../img/live1.png"),
          name: "未满是都是空",
          num: "2",
          people: "23",
          isLove: false
        },
        {
          cover: require("../img/live2.png"),
          name: "我们都是伽罗",
          num: "221",
          people: "523",
          isLove: true
        },
        {
          cover: require("../img/live1.png"),
          name: "未满是都是空",
          num: "52",
          people: "523",
          isLove: false
        },
        {
          cover: require("../img/live2.png"),
          name: "未满是都是空",
          num: "321",
          people: "523",
          isLove: false
        },
        {
          cover: require("../img/live2.png"),
          name: "未满是都是空",
          num: "321",
          people: "523",
          isLove: false
        },
        {
          cover: require("../img/live2.png"),
          name: "我们都是伽罗",
          num: "21",
          people: "523",
          isLove: false
        },
        {
          cover: require("../img/live1.png"),
          name: "那么",
          num: "232",
          people: "53",
          isLove: false
        }
      ],
      arr2: [
        {
          cover: require("../img/live2.png"),
          name: "我们都是伽罗",
          num: "21",
          people: "523",
          isLove: false
        }
      ],
      arr: [],
      lists: {
        hot: [],
        list: []
      },
      item_active: 1,
      userInfo2: null,
      page: 1,
      tab: "list"
    };
  },
  mounted() {
    this.arr = this.arr1;
    // this.userInfo2 = JSON.parse(localStorage.userInfo2 || "false");
    // this.load(true);
  },
  components: {
    topBar
  },
  methods: {
    itemActive(i) {
      this.item_active = i;
      if (i == 1) {
        this.arr = this.arr1;
      } else {
        this.arr = this.arr2;
      }
    },
    isLoveClick(item) {
      if (item.isLove) {
        item.num++;
      } else {
        item.num--;
      }
      item.isLove = !item.isLove;
    },
    back() {
      this.$router.go(-1);
    },
    load(reload) {
      if (reload) {
        this.page = 1;
        this.lists = {
          hot: [],
          list: []
        };
      }
      getLiveLists({
        page: this.page,
        //page_size: 16,
        machine_id: getGuid(),
        token: this.userInfo2.token,
        version: "H3.0.0"
      }).then(res => {
        if (res.data.code == 200) {
          // console.info(this.lists.hot)
          this.lists.hot = this.lists.hot.concat(res.data.data.hot);
          this.lists.list = this.lists.list.concat(res.data.data.list);
        }
      });
    },
    toWatch(index) {
      localStorage.watchLive = JSON.stringify(this.lists[this.tab][index]);
      this.$router.push("/live/watch");
    }
  }
};
</script>

<style lang="stylus" scoped>
.live-contents {
  padding-top: 0.8rem;
  width: 100%;
  min-height: 100%;
  background: linear-gradient(0deg, rgba(49, 51, 59, 1), rgba(56, 61, 72, 1), rgba(66, 70, 84, 1), rgba(74, 77, 93, 1));

  .header {
    width: 100%;
    height: 0.8rem;
    display: flex;
    align-items: center;
    color: #FFF;
    padding: 0 8px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background: linear-gradient(0deg, rgba(49, 51, 59, 1), rgba(56, 61, 72, 1), rgba(66, 70, 84, 1), rgba(74, 77, 93, 1));

    .h-w {
      width: 100%;
      position: relative;
      height: 100%;

      i {
        font-size: 20px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      .h-main {
        width: 3rem;
        height: 100%;
        line-height: 0.8rem;
        display: flex;
        font-size: 15px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        .item {
          flex: 1;
          line-height: 0.8rem;
          text-align: center;
        }

        .itemActive {
          color: #00FFF0;
        }

        .item2 {
          width: 1px;
          height: 40%;
          margin-top: 13px;
          background: #FFFFFF;
        }
      }
    }
  }

  .banner {
    width: 100%;
    height: 2.9rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .live-lists {
    width: 100%;
    height: calc(100% - 0.8rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-around;
    align-items: center;
  }

  .live-lists li {
    position: relative;
    width: 50%;
  }

  .live-lists li div {
    margin: 0.05rem;
  }

  .live-lists img {
    width: 100%;
  }

  .live-lists span {
    position: absolute;
    bottom: 0.05rem;
    font-size: 0.4rem;
    color: white;
  }

  .live-lists span.live-name {
    left: 0.2rem;
    font-size: 14px;
    bottom: 10px;
  }

  .live-lists span.watch-num {
    right: 0rem;
    font-size: 14px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    bottom: 10px;

    .item {
      min-width: 0.7rem;
      text-align: center;

      img {
        width: 0.32rem;
        height: 0.29rem;
        display: inline-block;
        margin: 0 auto;
      }
    }

    .item3 {
      margin-top: 10px;

      img {
        width: 0.29rem;
        height: 0.33rem;
        display: inline-block;
        margin: 0 auto;
      }
    }
  }
}
</style>
